<template>
    <el-form-item label="" prop="title">
        <div class="flexbox flexcenter">
            <el-popover placement="bottom" width="460" trigger="click">
                <div class="yusuan_num">创意组：{{createform.creatinfo_list.length}} /10</div>
                <div class="yusuan_list">
                    <div class="yusuan_item flexbox flexcenter flexbetween" @click="seletCreatinfo(item,index)" :class="{'active':index==createform.creatinfo_active}" v-for="(item,index) in createform.creatinfo_list" :key="index">
                        <img src="../../../assets/img/market_checked.svg" alt="" class="ys_check">
                        <el-input v-model="item.model_name" placeholder="请输入内容" size="small" class="ys_input" @input="changePlanKey(6,item.model_name)"></el-input>
                        <div class="yusuan_edit flexbox flexcenter">
                            <el-tooltip content="删除" placement="top">
                                <span class="icon_btn" @click.stop="deletCreatinfo(index)"><img src="../../../assets/img/ys_icon2.svg" alt=""></span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="yusuan_btn flexbox flexbetween">
                    <el-button size="mini" style="width:100%" @click="addCreatinfo">添加创意组</el-button>
                </div>
                <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                    <span class="select_text">{{createform.creatinfo.model_name}}</span>
                    <span class="el-icon-caret-bottom"></span>
                </div>
            </el-popover>
            <div class="yusuan_num" style="font-size:14px;margin-left:16px">创意组：{{createform.creatinfo_list.length}} /10</div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props:["createform"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        sessionSave(){
            this.$emit("sessionSave")
        },

        changePlanKey(index, name){
            this.$emit("changePlanKey",index,name)
        },


        // 选择制作创意模板
        seletCreatinfo(val, index) {
            let that = this;
            let list = that.createform;
            if (list.creatinfo_list.length == 1) {
                list.creatinfo_active = index;
                list.creatinfo = val;
            } else {
                this.creatCheck(list.creatinfo_active, function () {
                    list.creatinfo_list[list.creatinfo_active] = list.creatinfo;
                    list.creatinfo_active = index;
                    list.creatinfo = val;
                    that.changePlanKey(6, val.model_name);
                });
            }
            this.sessionSave();
        },

        //删除制作创意模板
        deletCreatinfo(index) {
            let list = this.createform;
            if (this.createform.creatinfo_list.length == 1) {
                return;
            } else {
                list.creatinfo_list.splice(index, 1);
                list.creatinfo_active = 0;
                list.creatinfo = list.creatinfo_list[0];
            }
            this.sessionSave();
        },

        // 添加制作创意模板
        addCreatinfo() {
            let that = this;
            let list = that.createform;
            if (list.creatinfo_list.length > 9) {
                return;
            } else {
                this.creatCheck(list.creatinfo_active, function () {
                    let creatinfo = {
                        model_name: "创意组" + (list.creatinfo_list.length + 1),
                        creative: [],
                    };
                    list.creatinfo_list.push(creatinfo);
                    list.creatinfo_active = list.creatinfo_list.length - 1;
                    list.creatinfo = list.creatinfo_list[list.creatinfo_active];
                });
            }
            this.sessionSave();
        },

        // 制作创意校验
        creatCheck(index, callback) {
            let list = this.createform.creatinfo_list;

            if (
                this.createform.creative_material_mode ==
                "PROGRAMMATIC_CREATIVE"
            ) {
                if (list[index].creative.length == 0) {
                    this.$message.error("请添加创意内容！");
                    return;
                }
            }

            if (this.createform.creative_material_mode == "CUSTOM_CREATIVE") {
                if (list[index].creative.length == 0) {
                    this.$message.error("请添加创意内容！");
                    return;
                }

                for (let i in list[index].creative) {
                    if (!list[index].creative[i].title) {
                        this.$message.error("请输入创意标题！");
                        return;
                    }
                }
            }

            callback();
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

